<template>
  <div class="my-container" v-if="userInfo">
    <div class="header">
      <van-image round width="6rem" height="6rem" :src="userInfo.avatar" />
      <p class="nickname">{{ userInfo.username }}</p>
    </div>
    <div class="body">
      <van-cell title="会员中心" is-link />
      <van-cell title="我的订单" @click="$router.push('/order')" is-link />
      <van-cell title="收货地址" is-link />
      <van-cell title="我的足迹" is-link />
      <van-cell title="我的收藏" is-link />
      <van-cell title="意见反馈" is-link />
    </div>
    <div class="footer">
      <van-button block round type="danger" @click="logout">退出</van-button>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { Dialog } from 'vant'
import { mapMutations } from 'vuex'
export default {
  name: 'My',
  data () {
    return {
      userInfo: null
    }
  },
  created () {
    this.getUserInfoData()
  },
  methods: {
    ...mapMutations('user', ['setToken']),
    async getUserInfoData () {
      const res = await getUserInfo()

      this.userInfo = res.data
    },
    logout () {
      Dialog.confirm({
        title: '提示',
        message: '确认退出吗?'
      })
        .then(() => {
          // 清空token
          this.setToken('')

          // 跳转登录页面
          this.$router.replace('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-container {
  .header {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c82519;
    flex-direction: column;
    .nickname {
      margin-top: 20px;
      color: white;
      font-size: 18px;
    }
  }
  .footer {
    padding: 30px 10px 0px;
  }
}
</style>
